<template>
  <div>
    <p>
      clicked: {{ count }} times, count is
      {{ isOddOrEven }}
    </p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">increment if odd</button>
    <button @click="incrementAsync">increment async</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";

/*
   mapState   将vuex中的state映射到组件中来，组件可以通过this直接使用
    mapState([数据名称1, 数据名称2])
      返回值是一个对象：
        {
          数据名称1: function,
          数据名称2: function,
        }
   mapGetters 将vuex中的getters映射到组件中来，组件可以通过this直接使用
     映射数据要映射到计算属性computed
   mapActions 将vuex中的actions函数映射到组件中来，组件可以通过this直接使用
   mapMutations 将vuex中的mapMutations函数映射到组件中来，组件可以通过this直接使用
     映射数据要映射到方法methods
*/

export default {
  name: "App",
  mounted() {
    console.log(this);
  },
  computed: {
    // count: mapState(['count', 'xxx']).count,
    // xxx: mapState(['count', 'xxx']).xxx,
    ...mapState(["count"]),
    ...mapGetters(["isOddOrEven"]),
  },
  methods: {
    ...mapActions(["incrementIfOdd", "incrementAsync"]),
    ...mapMutations(["INCREMENT", "DECREMENT"]),
    increment() {
      // 触发vuex中数据更新
      // this.$store.commit("INCREMENT", 1); // 触发mutation函数
      this.INCREMENT(1);
    },
    decrement() {
      // this.$store.commit("DECREMENT", 1);
      this.DECREMENT(1);
    },
    // incrementIfOdd() {
    //   // this.$store.dispatch("incrementIfOdd"); // 触发action函数
    //   this.incrementIfOdd();
    // },
    // incrementAsync() {
    //   // this.$store.dispatch("incrementAsync");
    //   this.incrementAsync();
    // },
  },
};
</script>

<style>
</style>